<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Markdown Formatting Demo</title>

  <!-- mobile responsive meta -->
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

  <!-- Slick Carousel -->
  <link rel="stylesheet" href="https://hp027.gitee.io/plugins/slick/slick.css" />
  <link rel="stylesheet" href="https://hp027.gitee.io/plugins/slick/slick-theme.css" />
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://hp027.gitee.io/plugins/font-awesome/css/font-awesome.min.css" />

  <!-- Magnific Popup -->
  <link rel="stylesheet" href="https://hp027.gitee.io/plugins/magnafic-popup/magnific-popup.css" />

  <!-- Stylesheets -->
  
  <link href="https://hp027.gitee.io/scss/style.min.css" rel="stylesheet" />

  <!--Favicon-->
  <link rel="shortcut icon" href="https://hp027.gitee.io/images/favicon.ico" type="image/x-icon" />
  <link rel="icon" href="https://hp027.gitee.io/images/favicon.png" type="image/x-icon" />
  
  <!-- Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=YOUR%20GOOGLE%20ANALYTICS%20CODE"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'YOUR GOOGLE ANALYTICS CODE');
  </script>
  
</head>

<body>
  <nav class="navbar navbar-expand-lg fixed-top">
  <div class="container">
    <a href="https://hp027.gitee.io/" class="navbar-brand">
      <img src="https://hp027.gitee.io/images/site-navigation/logo.png" alt="site-logo">
    </a>
    <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#navbarCollapse">
      <span class="navbar-toggler-icon"></span>
      <span class="navbar-toggler-icon"></span>
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
      <ul class="nav navbar-nav main-navigation my-0 mx-auto">
        
        
        <li class="nav-item">
          <a href="https://hp027.gitee.io/#home"
            class="nav-link text-dark text-sm-center p-2 ">Home</a>
        </li>
        
        <li class="nav-item">
          <a href="https://hp027.gitee.io/#about"
            class="nav-link text-dark text-sm-center p-2 ">About</a>
        </li>
        
        <li class="nav-item">
          <a href="https://hp027.gitee.io/#service"
            class="nav-link text-dark text-sm-center p-2 ">Service</a>
        </li>
        
        <li class="nav-item">
          <a href="https://hp027.gitee.io/#portfolio"
            class="nav-link text-dark text-sm-center p-2 ">Work</a>
        </li>
        
        <li class="nav-item">
          <a href="https://hp027.gitee.io/#resume"
            class="nav-link text-dark text-sm-center p-2 ">Resume</a>
        </li>
        
        <li class="nav-item">
          <a href="https://hp027.gitee.io/#blog"
            class="nav-link text-dark text-sm-center p-2 ">Blog</a>
        </li>
        
        <li class="nav-item">
          <a href="https://hp027.gitee.io/#contact"
            class="nav-link text-dark text-sm-center p-2 ">Contact</a>
        </li>
        
      </ul>
      <div class="navbar-nav">
        <a href="https://hp027.gitee.io/contact" class="btn btn-primary btn-zoom hire_button">Hire Me Now</a>
      </div>
    </div>
  </div>
</nav>
  <div id="content">
    

<header class="breadCrumb">
  <div class="container">
    <div class="row">
      <div class="col-lg-10 col-md-12 offset-lg-1 offset-md-0 text-center">
        <h3 class="breadCrumb__title">Markdown Formatting Demo</h3>
        <nav aria-label="breadcrumb" class="d-flex justify-content-center">
          <ol class="breadcrumb align-items-center">
            <li class="breadcrumb-item"><a href=https://hp027.gitee.io/>Home</a></li>
            <li class="breadcrumb-item"><a href=https://hp027.gitee.io/blog>All Post</a></li>
            <li class="breadcrumb-item active" aria-current="page">Markdown Formatting Demo</li>
          </ol>
        </nav>
      </div>
    </div>
  </div>
</header>

<section class="section singleBlog">
  <div class="svg-img">
      <img src=https://hp027.gitee.io/images/hero/figure-svg.svg alt="">
  </div>
  <div class="animate-shape">
      
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600">
          <defs>
              <linearGradient id="d" x1="0.929" y1="0.111" x2="0.263" y2="0.935" gradientUnits="objectBoundingBox">
                  <stop offset="0" stop-color="#f1f6f9" />
                  <stop offset="1" stop-color="#f1f6f9" stop-opacity="0" />
              </linearGradient>
          </defs>
          <g data-name="blob-shape (3)">
              <path class="blob" fill="url(#d)"
                  d="M455.4 151.1c43.1 36.7 73.4 92.8 60.8 136.3-12.7 43.5-68.1 74.4-111.3 119.4-43.1 45-74 104.1-109.8 109-35.9 5-76.7-44.2-111.8-89.2-35.2-45-64.7-85.8-70.8-132.6-6-46.8 11.6-99.6 46.7-136.3 35.2-36.6 88-57.2 142.4-58.8 54.5-1.7 110.6 15.6 153.8 52.2z" />
          </g>
      </svg>
  </div>
  <div class="animate-pattern">
      <img src=https://hp027.gitee.io/images/service/background-pattern.svg alt="background-shape">
  </div>
  <div class="container">
      <div class="row">
          <div class="col-lg-12">
              <div class="singleBlog__feature">
                  <img src=https://hp027.gitee.io/images/single-blog/feature-image.jpg alt="feature-image">
              </div>
          </div>
      </div>
      <div class="row mt-5">
          <div class="col-lg-12">
              <div class="singleBlog__content">
                  <p>This example Markdown file compliments of <a href="https://markdown-it.github.io/">markdown-it.github.io</a></p>
<hr>
<h1 id="h1-heading-8-">h1 Heading 8-)</h1>
<h2 id="h2-heading">h2 Heading</h2>
<h3 id="h3-heading">h3 Heading</h3>
<h4 id="h4-heading">h4 Heading</h4>
<h5 id="h5-heading">h5 Heading</h5>
<h6 id="h6-heading">h6 Heading</h6>
<h2 id="horizontal-rules">Horizontal Rules</h2>
<hr>
<hr>
<hr>
<h2 id="typographic-replacements">Typographic replacements</h2>
<p>Enable typographer option to see result.</p>
<p>(c) (C) (r) (R) (tm) (TM) (p) (P) +-</p>
<p>test.. test&hellip; test&hellip;.. test?&hellip;.. test!&hellip;.</p>
<p>!!!!!! ???? ,,  &ndash; &mdash;</p>
<p>&ldquo;Smartypants, double quotes&rdquo; and &lsquo;single quotes&rsquo;</p>
<h2 id="emphasis">Emphasis</h2>
<p><strong>This is bold text</strong></p>
<p><strong>This is bold text</strong></p>
<p><em>This is italic text</em></p>
<p><em>This is italic text</em></p>
<p><del>Strikethrough</del></p>
<h2 id="blockquotes">Blockquotes</h2>
<blockquote>
<p>Blockquotes can also be nested&hellip;</p>
<blockquote>
<p>&hellip;by using additional greater-than signs right next to each other&hellip;</p>
<blockquote>
<p>&hellip;or with spaces between arrows.</p>
</blockquote>
</blockquote>
</blockquote>
<h2 id="lists">Lists</h2>
<p>Unordered</p>
<ul>
<li>Create a list by starting a line with <code>+</code>, <code>-</code>, or <code>*</code></li>
<li>Sub-lists are made by indenting 2 spaces:
<ul>
<li>Marker character change forces new list start:
<ul>
<li>Ac tristique libero volutpat at</li>
</ul>
<ul>
<li>Facilisis in pretium nisl aliquet</li>
</ul>
<ul>
<li>Nulla volutpat aliquam velit</li>
</ul>
</li>
</ul>
</li>
<li>Very easy!</li>
</ul>
<p>Ordered</p>
<ol>
<li>
<p>Lorem ipsum dolor sit amet</p>
</li>
<li>
<p>Consectetur adipiscing elit</p>
</li>
<li>
<p>Integer molestie lorem at massa</p>
</li>
<li>
<p>You can use sequential numbers&hellip;</p>
</li>
<li>
<p>&hellip;or keep all the numbers as <code>1.</code></p>
</li>
</ol>
<p>Start numbering with offset:</p>
<ol start="57">
<li>foo</li>
<li>bar</li>
</ol>
<h2 id="code">Code</h2>
<p>Inline <code>code</code></p>
<p>Indented code</p>
<pre><code>// Some comments
line 1 of code
line 2 of code
line 3 of code
</code></pre>
<p>Block code &ldquo;fences&rdquo;</p>
<pre><code>Sample text here...
</code></pre><p>Syntax highlighting</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">foo</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">bar</span>) {
  <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">bar</span><span style="color:#f92672">++</span>;
};

<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">foo</span>(<span style="color:#ae81ff">5</span>));
</code></pre></div><h2 id="tables">Tables</h2>
<table>
<thead>
<tr>
<th>Option</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>path to data files to supply the data that will be passed into templates.</td>
</tr>
<tr>
<td>engine</td>
<td>engine to be used for processing templates. Handlebars is the default.</td>
</tr>
<tr>
<td>ext</td>
<td>extension to be used for dest files.</td>
</tr>
</tbody>
</table>
<p>Right aligned columns</p>
<table>
<thead>
<tr>
<th style="text-align:right">Option</th>
<th style="text-align:right">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:right">data</td>
<td style="text-align:right">path to data files to supply the data that will be passed into templates.</td>
</tr>
<tr>
<td style="text-align:right">engine</td>
<td style="text-align:right">engine to be used for processing templates. Handlebars is the default.</td>
</tr>
<tr>
<td style="text-align:right">ext</td>
<td style="text-align:right">extension to be used for dest files.</td>
</tr>
</tbody>
</table>
<h2 id="links">Links</h2>
<p><a href="http://dev.nodeca.com">link text</a></p>
<p><a href="http://nodeca.github.io/pica/demo/" title="title text!">link with title</a></p>
<p>Autoconverted link <a href="https://github.com/nodeca/pica">https://github.com/nodeca/pica</a> (enable linkify to see)</p>
<h2 id="images">Images</h2>
<p>(note: redacted this section cause images were too big)</p>
<!-- raw HTML omitted -->
<!-- raw HTML omitted -->
<h2 id="plugins">Plugins</h2>
<p>The killer feature of <code>markdown-it</code> is very effective support of
<a href="https://www.npmjs.org/browse/keyword/markdown-it-plugin">syntax plugins</a>.</p>
<h3 id="emojieshttpsgithubcommarkdown-itmarkdown-it-emoji"><a href="https://github.com/markdown-it/markdown-it-emoji">Emojies</a></h3>
<blockquote>
<p>Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:</p>
<p>Shortcuts (emoticons): :-) :-( 8-) ;)</p>
</blockquote>
<p>see <a href="https://github.com/markdown-it/markdown-it-emoji#change-output">how to change output</a> with twemoji.</p>
<h3 id="subscripthttpsgithubcommarkdown-itmarkdown-it-sub--superscripthttpsgithubcommarkdown-itmarkdown-it-sup"><a href="https://github.com/markdown-it/markdown-it-sub">Subscript</a> / <a href="https://github.com/markdown-it/markdown-it-sup">Superscript</a></h3>
<ul>
<li>19^th^</li>
<li>H~2~O</li>
</ul>
<h3 id="inshttpsgithubcommarkdown-itmarkdown-it-ins"><a href="https://github.com/markdown-it/markdown-it-ins">&lt;ins&gt;</a></h3>
<p>++Inserted text++</p>
<h3 id="markhttpsgithubcommarkdown-itmarkdown-it-mark"><a href="https://github.com/markdown-it/markdown-it-mark">&lt;mark&gt;</a></h3>
<p>==Marked text==</p>
<h3 id="footnoteshttpsgithubcommarkdown-itmarkdown-it-footnote"><a href="https://github.com/markdown-it/markdown-it-footnote">Footnotes</a></h3>
<p>Footnote 1 link<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>.</p>
<p>Footnote 2 link<sup id="fnref:2"><a href="#fn:2" class="footnote-ref" role="doc-noteref">2</a></sup>.</p>
<p>Inline footnote^[Text of inline footnote] definition.</p>
<p>Duplicated footnote reference<sup id="fnref:2"><a href="#fn:2" class="footnote-ref" role="doc-noteref">2</a></sup>.</p>
<h3 id="definition-listshttpsgithubcommarkdown-itmarkdown-it-deflist"><a href="https://github.com/markdown-it/markdown-it-deflist">Definition lists</a></h3>
<dl>
<dt>Term 1</dt>
<dd>
<p>Definition 1
with lazy continuation.</p>
</dd>
<dt>Term 2 with <em>inline markup</em></dt>
<dd>
<p>Definition 2</p>
<pre><code>{ some code, part of Definition 2 }
</code></pre>
<p>Third paragraph of definition 2.</p>
</dd>
</dl>
<p><em>Compact style:</em></p>
<p>Term 1
~ Definition 1</p>
<p>Term 2
~ Definition 2a
~ Definition 2b</p>
<h3 id="abbreviationshttpsgithubcommarkdown-itmarkdown-it-abbr"><a href="https://github.com/markdown-it/markdown-it-abbr">Abbreviations</a></h3>
<p>This is HTML abbreviation example.</p>
<p>It converts &ldquo;HTML&rdquo;, but keep intact partial entries like &ldquo;xxxHTMLyyy&rdquo; and so on.</p>
<p>*[HTML]: Hyper Text Markup Language</p>
<h3 id="custom-containershttpsgithubcommarkdown-itmarkdown-it-container"><a href="https://github.com/markdown-it/markdown-it-container">Custom containers</a></h3>
<p>::: warning
<em>here be dragons</em>
:::</p>
<section class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1" role="doc-endnote">
<p>Footnote <strong>can have markup</strong></p>
<p>and multiple paragraphs.&#160;<a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
<li id="fn:2" role="doc-endnote">
<p>Footnote text.&#160;<a href="#fnref:2" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
</ol>
</section>

              </div>
          </div>
      </div>
  </div>
</section>


  </div>
  <section class="footer" id="contact">
	<div class="footer__background_shape">
		<svg viewBox="0 0 1920 79">
			<path d="M0 0h1920v79L0 0z" data-name="Path 1450" />
		</svg>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				<div class="footer__cta">
					<div class="shape-1">
						<svg xmlns="http://www.w3.org/2000/svg" width="357" height="315.029" viewBox="0 0 357 315.029">
							<path data-name="Path 1449"
								d="M76.1-157.222C91.746-135.8 87.2-94.273 99.993-61.945c12.7 32.328 42.661 55.459 39.248 73.282-3.318 17.823-40.007 30.337-65.6 43.325-25.5 12.988-39.912 26.545-60.01 42.566-20.1 16.116-46.074 34.6-63.328 27.682-17.349-6.921-25.976-39.153-59.915-59.82s-93.1-29.768-105.325-51.478 22.373-56.028 43.609-93.949c21.331-37.921 29.2-79.35 53.563-96.793 24.459-17.444 65.414-10.9 103.9-6.921 38.396 3.982 74.326 5.404 89.965 26.829z"
								transform="translate(217.489 188.626)" />
						</svg>
					</div>
					<div class="shape-2">
						<svg xmlns="http://www.w3.org/2000/svg" width="357" height="315.029" viewBox="0 0 357 315.029">
							<path data-name="Path 1449"
								d="M76.1-157.222C91.746-135.8 87.2-94.273 99.993-61.945c12.7 32.328 42.661 55.459 39.248 73.282-3.318 17.823-40.007 30.337-65.6 43.325-25.5 12.988-39.912 26.545-60.01 42.566-20.1 16.116-46.074 34.6-63.328 27.682-17.349-6.921-25.976-39.153-59.915-59.82s-93.1-29.768-105.325-51.478 22.373-56.028 43.609-93.949c21.331-37.921 29.2-79.35 53.563-96.793 24.459-17.444 65.414-10.9 103.9-6.921 38.396 3.982 74.326 5.404 89.965 26.829z"
								transform="translate(217.489 188.626)" />
						</svg>
					</div>
					<div class="text-light footer__cta_content">
						<span>Contact me</span>
						<h2 class="mb-0">Let’s Start a Project</h2>
					</div>
					<div class="footer__cta_action">
						<a class="btn btn-light btn-zoom" href="https://hp027.gitee.io/contact">Get in
							touch</a>
					</div>
				</div>
			</div>
		</div>
		<div class="row footer__widget">
			<div class="col-lg-4">
				<div class="footer__widget_logo mb-5">
					<img src="https://hp027.gitee.io/images/contact/widget-logo.png" alt="widget-logo">
				</div>
			</div>
			<div class="col-lg-4">
				<div class="text-light footer__widget_sitemap mb-5">
					<h4 class="base-font">Sitemap</h4>
					<ul class="unstyle-list small">
						
						
						<li class="mb-2"><a class="text-light" href="https://hp027.gitee.io/about">About me</a></li>
						
						<li class="mb-2"><a class="text-light" href="https://hp027.gitee.io/">Frequently Ask Question</a></li>
						
						<li class="mb-2"><a class="text-light" href="https://hp027.gitee.io/">Privacy &amp; Policy</a></li>
						
						<li class="mb-2"><a class="text-light" href="https://hp027.gitee.io/">Latest Article</a></li>
						
					</ul>
				</div>
			</div>
			<div class="col-lg-4">
				<div class="text-light footer__widget_address mb-5">
					<h4 class="base-font">Address</h4>
					
					<ul class="fa-ul small">
						<li class="mb-2"><a class="text-light" href="tel:&#43;%28448%29%20833%205272%20332"><span class="fa-li"><i
										class="fa fa-phone"></i></span>&#43;(448) 833 5272 332</a></li>
						<li class="mb-2"><a class="text-light" href="mailto:hello@example.com"><span class="fa-li"><i
										class="fa fa-envelope"></i></span>hello@example.com</a></li>
						<li class="mb-2">
							<span class="fa-li"><i class="fa fa-map-marker"></i></span>23 Khan Niketon, Grand Street, NYK.</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="row footer__footer">
			<div class="col-lg-6">
				<div class="footer__footer_copy text-light">
					<p>All right reserved copyright © Portio 2020</p>
				</div>
			</div>
			<div class="col-lg-6">
				<div class="footer__footer_social">
					<ul class="unstyle-list">
						
						
						<li class="d-inline-block mx-2"><a class="text-light" target="_blank" href="https://www.facebook.com/"><i
									class="fa fa-facebook-official"></i></a>
						</li>
						
						<li class="d-inline-block mx-2"><a class="text-light" target="_blank" href="https://www.linkedin.com/"><i
									class="fa fa-linkedin-square"></i></a>
						</li>
						
						<li class="d-inline-block mx-2"><a class="text-light" target="_blank" href="https://www.pinterest.com/"><i
									class="fa fa-pinterest-square"></i></a>
						</li>
						
						<li class="d-inline-block mx-2"><a class="text-light" target="_blank" href="https://twitter.com/"><i
									class="fa fa-twitter-square"></i></a>
						</li>
						
					</ul>
				</div>
			</div>
		</div>
	</div>
</section>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR%20GOOGLE%20MAP%20API&libraries=geometry"></script>
<script src="https://hp027.gitee.io/plugins/jQuery/jquery.min.js"></script>
<script src="https://hp027.gitee.io/plugins/bootstrap/bootstrap.min.js"></script>
<script src="https://hp027.gitee.io/plugins/slick/slick.min.js"></script>
<script src="https://hp027.gitee.io/plugins/waypoint/jquery.waypoints.min.js"></script>
<script src="https://hp027.gitee.io/plugins/magnafic-popup/jquery.magnific-popup.min.js"></script>
<script src="https://hp027.gitee.io/plugins/tweenmax/TweenMax.min.js"></script>
<script src="https://hp027.gitee.io/plugins/imagesloaded/imagesloaded.min.js"></script>
<script src="https://hp027.gitee.io/plugins/masonry/masonry.min.js"></script>

<script src="https://hp027.gitee.io/js/form-handler.min.js"></script>

<script src="https://hp027.gitee.io/js/script.min.js"></script>

</body>

</html>